<template>
    <div>
        
    <h3>笔记本电脑展示页面</h3>
    <ul v-if="pclist.length>0">
    <template v-for="(list) in pclist" >
        <li :key="list.id">
            <p>  {{list.title}} </p>
            <p>价格:{{list.price}}<p/> 
         <button @click.prevent="spe(list.id)">查看详情</button>
         </li>
    </template></ul>
    </div>
</template>

<script>
    export default {
        name:'Pc',
        methods:{
            spe(id){
                localStorage.setItem('pid',id)
                this.$router.push({
                    name:'Specific',
                    // params:{
                    //     id:id
                    // }
                })
            }
        },
        data(){
            return {
                pclist:[
                    {
                    id:1,
                    title:'leaovo s2',
                    price:2222
                },
                    {
                    id:2,
                    title:'axer s2',
                    price:77777
                },
                    {
                    id:3,
                    title:'mac s2',
                    price:5555
                },
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
ul{
    list-style: none;
    li{
        padding: 10px;
        text-align: left;
        color: black;
        font-size: 2em;
        margin: 10px;
        border: 1px solid black;
        // display: flex;
        position: relative;
        justify-content: space-between;
        width: 500px;
        button{
            position: absolute;
            right: 20px;
            height: 30px;
            top: 50px;
        }


    }

}
</style>